<!--
 * @Date: 2024-09-26 15:20:10
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-24 14:45:28
 * @Description: 设计渲染的组件
-->
<template>
  <draggable
    tag="transition-group"
    handle=".drag-handler"
    item-key="id"
    :="{ group:'dragGroup', animation: 200, ghostClass: 'ghost' }"
    :list="widgetList"
    :component-data="{name: 'fade'}"
    :move="checkContainerMove"
    @add="(evt) => onContainerDragAdd(evt, widgetList)"
    @update="onContainerDragUpdate"
  >
    <template #item="{ element: subWidget, index: swIdx }">
      <div :class="[ 'form-widget-item', `${subWidget.type}-item`, mark ? `${mark}__area` : '' ]">
        <!-- 布局部件 -->
        <template v-if="'container' === subWidget.category">
          <component
            :is="`${subWidget.type}-widget`"
            :key="subWidget.id"
            :widget="subWidget"
            :designer="designer"
            :parent-list="widgetList"
            :parent-widget="widget"
            :index-of-parent-list="swIdx"
          >
          </component>
        </template>
        <!-- 字段部件 -->
        <template v-else>
          <component
            :is="`${subWidget.type}-widget`"
            :key="subWidget.id"
            :field="subWidget"
            :designer="designer"
            :parent-list="widgetList"
            :design-state="true"
            :parent-widget="widget"
            :index-of-parent-list="swIdx"
          >
          </component>
        </template>
      </div>
    </template>
  </draggable>
</template>

<script>
import refMixinDesign from "@/components/form-designer/refMixinDesign"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'

export default {
  name: 'RkLayoutComp',
  props: {
    mark: String,
    widget: Object,
    designer: Object,
    widgetList: Array,
  },
  mixins: [containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    ...FieldComponents
  }
}
</script>

<style lang="scss" scoped>

</style>